/* 头部 */
header {
    display: flex;
    justify-content: space-between;
}

header>div {
    height: .6rem;
}

header>div:nth-of-type(1) {
    width: 2rem;
    background-color: rgb(212, 221, 230);
}

header>div:nth-of-type(1)>a {
    display: block;
    text-align: center;
    line-height: .6rem;
    font-size: .18rem;
    color: black;
    
}

header>div:nth-of-type(1)>a:hover {
    color: blue;
    text-decoration: underline;
}

header>div:nth-of-type(2) {
    flex: 1;
    background-color: rgb(179, 193, 209);
}

/* 内容区 */
main {
    flex: 1;
    display: flex;
    justify-content: space-between;
    font-size: .14rem;
}

/* 内容导航栏 */
.nav {
    width: 2rem;
    background-color: rgb(212, 221, 230);

}

.nav>nav {
    width: 2rem;
    background-color: rgb(84, 92, 99);
}

.nav-icon {
    display: inline-block;
    height: .14rem;
    width: .14rem;
    background: url('../icon/坐标.png') no-repeat;
    background-size: .14rem;
}

.nav-icon2 {
    background-image: url('../icon/向下箭头.png');
    transform: translateX(.8rem);
}

.nav-icon-change {
    background-image: url('../icon/向上箭头.png');
}

.nav>nav>ul>li {
    padding: .2rem 0;
    padding-left: .14rem;
    color: whitesmoke;
    cursor: pointer;
}

.nav>nav>ul>li:nth-of-type(2) {
    padding-top: 0;
    padding-bottom: 0;
}

.nav>nav>ul>li>ul>li {
    padding: .2rem 0;
    padding-left: .18rem;
}

.nav>nav>ul>li>ul>li>a {
    color: whitesmoke;
    transition: all .5s;
}

.nav>nav>ul>li>ul>li>a:hover {
    color: rgb(234, 215, 103);
}

/* 内容 */
.content {
    flex: 1;
    background-color: rgb(234, 239, 243);
    padding: .2rem;
}

.content>p {
    font-size: .16rem;
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    font-style: italic;
    padding: 20px;
}